<template>
  <div class="deskCrumbs">
    <div class="deskCrumbs-returnon" @click="backspacePage">
      <icon-left size="26" />
      返回上层页面
    </div>
    <a-breadcrumb>
      <template v-for="(v, i) in itemDom" :key="i">
        <component :is="v.meta.icon" v-if="i == 0"></component>
        <a-breadcrumb-item>
          <!-- 面包屑最后一项&路 -->
          <div v-if="i == itemDom.length - 1 && v.meta.changeBread" class="deskCrumbs-items">
            {{ v.meta.title }}
          </div>
          <div v-else class="deskCrumbs-items" @click="gotoBack(v)">{{ v.meta.title }}</div>
        </a-breadcrumb-item>
      </template>
    </a-breadcrumb>
  </div>
</template>
<script lang="ts">
import { toRefs } from 'vue';
import importConfigFunction from './deskCrumbs';

export default {
  name: 'TheBack',
  setup() {
    const { base, gotoBack, init, backspacePage } = importConfigFunction();
    init();
    return {
      ...toRefs(base),
      gotoBack,
      backspacePage,
    };
  },
};
</script>
<style lang="less" scoped>
.deskCrumbs {
  font-size: 16px;
  //padding: 10px;
  //background: white;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  &-items {
    cursor: pointer;
  }
  &-returnon {
    display: flex;
    align-items: center;
    margin-right: 20px;
    cursor: pointer;
    color: #333;
  }
}
</style>
